<template>
  <div>
    <div class="row article-body" style="width: 1200px; margin: 0 auto;">
      <div class="col-sm-8 blog-main" style="float: left;padding-top: 10px;">
        <div class="blog-body overflow-initial fade-in">
          <div class="article-flag">
            <span class="article-blockquote article-blockquote-green"></span>
            <span class="article-original article-original-green">
                            <a href="https://www.zhyd.me/article/142"><i class="fa fa-check"></i> 转载</a>
                        </span>
            <div class="blog-info-meta pull-right" style="float: right">
              <ul class="list-unstyled list-inline">
                <li><i class="fa fa-clock-o fa-fw"></i>{{ obj.time }}</li>
                <li><i class="fa fa-eye fa-fw"></i><a class="pointer" data-original-title="2,680人浏览了该文章"
                                                      data-toggle="tooltip" data-placement="bottom">浏览 (
                  {{ obj.hit }}
                  )</a></li>
                <li><a href="#comment-box" data-original-title="10人评论了该文章" data-toggle="tooltip"
                       data-placement="bottom"><i class="fa fa-comments-o fa-fw"></i>评论 ( {{ obj.pls }})</a></li>
              </ul>
            </div>
          </div>
          <div class="blog-info overflow-initial">
            <h1 class="blog-info-title">
              <strong>{{ obj.name }}</strong>
            </h1>
            <div v-html="obj.wenben"></div>
          </div>
        </div>

        <div style="padding-top: 30px;">
          <Button type="primary" @click="fabubupl" v-show="jshF(2)">发表评论</Button>
          <div v-for="item in pinglun.data"
               style="text-align: left; margin-top: 15px; background: #fff; padding: 20px;     color: rgb(163, 163, 163)">
            发表人：
            <span
                style="color: #3d9ef0;margin-right: 30px">{{
                item.author.username
              }}</span>发表时间{{ moment(item.time).format('YYYY-MM-DD hh:mm') }}<a style="float: right"
                                                                                @click="huifu(item.id)"
                                                                                v-show="jshF(2)">回复</a><br>
            <h3 style="color: #333;padding: 10px 0;">{{ item.content }}</h3>

            <div style="padding: 5px;padding-left: 35px; color: #a3a3a;background: #f9f9f9" v-if="item.huifu">
              回复 {{ item.huifu.author.username }} <span style="margin-left: 30px;">发表时间：{{
                moment(item.huifu.time).format('YYYY-MM-DD hh:mm')
              }}</span><br>
              <h2 style="color: #333">{{ item.huifu.content }}</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-3 blog-sidebar" style="float: right;">
        <left/>
        <Modal v-model="bol" width="360" :footer="false" @on-ok="fabu">
          <Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."/>
        </Modal>
      </div>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
import SparkMD5 from 'spark-md5'
import left from './left'


let idc = JSON.parse(localStorage.getItem('id'))
export default {

  data () {
    return {
      isHuifu: idc && JSON.parse(localStorage.getItem('id')).authority ? JSON.parse(localStorage.getItem('id')).authority.find(i => i.id === 2) : false,
      arr: [],
      obj: {},
      pinglun: {},
      value6: '',
      bol: false,
      huizi: null
    }
  },
  mounted () {
    this.getDetails()
    this.getPinglun()
  },
  methods: {
    moment,

    getDetails () {
      this.$axios.get('api/article/details?id=' + this.$route.params.id).then(res => {
        this.obj = res.data.data
      }).then()
    },
    getPinglun () {
      this.$axios.get('api/article/comment/list?id=' + this.$route.params.id).then(res => {
        this.pinglun = res.data
      })
    },
    fabu () {
      this.$axios.post('api/article/comment/add', {
        wzid: this.$route.params.id,
        type: this.huizi == null ? 0 : 1,
        content: this.value6,
        to_uid: this.huizi
      }).then(res => {
        console.log(res)
        this.getPinglun()
        this.bol = false
      })
    },
    fabubupl () {
      this.bol = true
      this.huizi = null
    },
    huifu (ddd) {
      this.bol = true
      this.huizi = ddd
    },
    jshF (qxid) {
      return this.$store.getters.qx.find(i => i.id === qxid)
    }

  },
  components: {
    left
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
